<script setup lang="ts" name="TomatoList">
import MenuBar from '@/views/components/menuBar/index.vue'
import { parseTime } from '@/utils/ruoyi'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const tableData = ref<any>([])

const domMenuBar = ref()

const calcAllTime = computed(() => {
  let value = 0
  tableData.value.forEach((e: any) => {
    value += e.realTime
  })
  return milsToMin(value)
})

const handleFrameClose = () => {
  domMenuBar.value.close()
}

const handleClearRecord = () => {
  window.ipcRenderer.send('TOMATO-CLEAR-LIST')
  tableData.value = []
  proxy?.$modal.alertSuccess('已清空今日番茄')
}

const milsToMin = (mils: number) => {
  let h = Math.floor(mils / 1000 / 60 / 60)
  let m = Math.floor(mils / 1000 / 60 % 60)
  let s = Math.floor(mils / 1000) % 60
  const hh = h < 10 ? '0' + h : h
  const mm = m < 10 ? '0' + m : m
  const ss = s < 10 ? '0' + s : s
  if (h == 0) {
    return `${mm}:${ss}`
  }
  return `${hh}:${mm}:${ss}`
}

onMounted(() => {
  //监听获取时间
  const { module, value } = window.ipcRenderer.sendSync('STORAGE-GET', { module: 'tomato' })
  if (module == 'tomato') {
    tableData.value = value.todayList
  }
})
</script>
<template>
  <MenuBar ref="domMenuBar" title="今日番茄" barColor="#222" hideMaximize hideMinimize
    :logo="{ isIcon: true, value: 'list' }" />
  <div class="main-content tomato-list">
    <el-table :data="tableData" empty-text="没找到番茄记录，赶紧创建一个吧">
      <el-table-column prop="finishTime" label="记录时间">
        <template #default="scope">
          {{ parseTime(scope.row.finishTime)?.split(' ')[1] }}
        </template>
      </el-table-column>
      <el-table-column prop="taskTime" label="番茄时长">
        <template #default="scope">
          {{ milsToMin(scope.row.taskTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status" type="success">完成</el-tag>
          <el-tag v-else type="warning">中断</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="realTime" label="实际时长">
        <template #default="scope">
          {{ milsToMin(scope.row.realTime) }}
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <span v-if="tableData.length" class="text-[#666] f-14 font-bold">总共<span class="text-[#009966]">{{
        tableData.length
          }}</span>个番茄，总时长<span class="text-[#009966]">{{ calcAllTime }}</span> &emsp;&emsp;</span>
      <el-button type="warning" icon="Refresh" plain @click="handleClearRecord">清空</el-button>
      <el-button icon="Close" plain @click="handleFrameClose">关闭</el-button>
    </div>
  </div>
</template>
<style lang="scss">
.main-content.tomato-list {
  overflow: hidden;
  width: 100vw;
  background-color: #fff;

  .el-table {
    width: 100vw;
    height: calc(100vh - 90px);
  }

  .footer {
    width: 100vw;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
  }
}
</style>
<style lang="scss" scoped></style>
